import React, { useState } from "react";
// List组件就是一个列表样式效果
// InfiniteScroll这个才是无限滚动的组件
import { Image, InfiniteScroll, List as InfiniteList } from "antd-mobile";
import { dalImg } from "../../utils/tools";

function List() {
  const [data, setData] = useState<any[]>([]); // 数据
  const [hasMore, setHasMore] = useState(true); // 是否有更多
  const [page, setPage] = useState(1);
  // async function loadMore() {
  //   // const append = await mockRequest();
  //   // setData((val) => [...val, ...append]);
  //   // setHasMore(append.length > 0);
  //   const res = await loadProductsAPI(page);
  //   setData((v) => [...v, ...res.data]); // 设置数据
  //   setPage((p) => p + 1);
  //   // 页码加一
  //   setHasMore(page < res.pages); // 是否没有更多
  // }

  return (
    <>
      {/* <InfiniteList>
        {data.map((item, index) => (
          <InfiniteList.Item
            key={index}
            prefix={
              <Image
                style={{ borderRadius: 20 }}
                fit="cover"
                width={60}
                height={60}
                src={dalImg(item.coverImage)}
              />
            }
            description={item.price}
          >
            {item.name}
          </InfiniteList.Item>
        ))}
      </InfiniteList> */}
      {data.map((item) => (
        <div className="item" key={item.id}>
          <img src={dalImg(item.coverImage)} alt="" />
          <h3>{item.name}</h3>
          <hr />
        </div>
      ))}

      {/* 
        loadMore 是一个方法，触底之后加载数据 
        hasMore 是一个属性，表示是否有更多数据
      */}
      {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> */}
    </>
  );
}

export default List;
